组件通讯

props   react技术, 自上而下  父传子
context  react技术, 自上而下 可以跨级
pubsub-js 第三方的js库 随意传递

PubSub.subscribe('话题',回调)
PubSub.publish('话题',数据)


性能优化

1. 减轻state. 与渲染无关的数据,不存储在state里面
2. shouldComponentUpdate 更新阶段,render之前调用 .如果返回true,则render执行,否则render不执行

    旧数据: this.state或this.props
    新数据: nextProps或nextState

3. PureComponent 其实就是帮我们实现了shouldComponentUpdate. 注意: 判断时是浅层对比


HOC和renderprops

作用: 将组件中出现的相同的状态和逻辑定义在一个公共组件中,使用时,有几个组件需要这些状态和逻辑就new几个公共组件的实例,然后通过props传递给需要的组件

HOC和renderprops 是利用react之前学习的技术实现的一种编程技巧,不是新的api


```js

HOC 

export default withXxx function(WrappedComponent){
    return class extends Component{
        定义状态和逻辑
        render(){
            return <WrappedComponent {...this.props} {...this.state}></WrappedComponent>
        }
    }
}

const WithFar = withXxx(子组件)
最终使用父组件


renderprops

class Far extends Component{
    定义状态和逻辑
    render(){
        return this.props.render(this.state)
        return this.props.children(this.state)
    }
}

<Far render={(state)=>{return <子组件 />}}></Far>
<Far >{(state)=>{return <子组件 />}}</Far>


```

HOOK

useState: 模拟类组件中的状态

    let [变量名, 修改数据的方法] = useState(初始值)

useEffect: 模拟类组件中的生命周期


HOOK的使用规则: 
1. 只能在函数组件或其他HOOK中使用. 普通函数和类组件都不能用
2. 必须处于顶级作用域

